<template>
  <div>
    <el-divider v-if="loginTypeList.length > 0"><span style="font-size: 12px">其他登录方式</span></el-divider>
    <div style="text-align: center;margin-top: 10px;" v-if="loginTypeList.length > 0">
      <el-row>
        <el-col
          :span="colSpan[loginTypeList.length].span"
          :offset="index === 0 ? colSpan[loginTypeList.length].offset : 0"
          v-for="(loginType,index) in loginTypeList"
          :key="index">
          <wx-login
            v-if="loginType === 0"
            :login-type="wxLoginOption.loginType"
            :top-title="wxLoginOption.topTitle"
            :tips-title="wxLoginOption.tipsTitle"
            :button-title="wxLoginOption.buttonTitle"
            ref="wxLogin"></wx-login>
          <wx-official-login
            v-if="loginType === 1"
            :login-type="wxOfficialLoginOption.loginType" :top-title="wxOfficialLoginOption.topTitle"
            :tips-title="wxOfficialLoginOption.tipsTitle"
            :button-title="wxOfficialLoginOption.buttonTitle"
            ref="wxOfficialLogin"></wx-official-login>
          <feishu-login
            v-if="loginType === 2"
            :login-type="feishuLoginOption.loginType" :top-title="feishuLoginOption.topTitle"
            :tips-title="feishuLoginOption.tipsTitle" :button-title="feishuLoginOption.buttonTitle"
            ref="FeishuLogin"></feishu-login>
          <dingtalk-login
            v-if="loginType === 3"
            :login-type="dingtalkLoginOption.loginType" :top-title="dingtalkLoginOption.topTitle"
            :tips-title="dingtalkLoginOption.tipsTitle" :button-title="dingtalkLoginOption.buttonTitle"
            ref="FeishuLogin"></dingtalk-login>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import WxLogin from "./wxLogin";
import WxOfficialLogin from "./wxOfficialLogin"
import FeishuLogin from "./feishuLogin"
import DingtalkLogin from "./dingtalkLogin"
import {mapState} from "vuex";

export default {
  name: "login",
  props: {},
  components: {WxLogin, WxOfficialLogin, FeishuLogin, DingtalkLogin},
  data() {
    return {
      visible: false,
      // loginTypeList: [0, 1, 2, 3],
      colSpan: {
        1: {span: 24, offset: 0}, // 24
        2: {span: 12, offset: 0}, // 12+12
        3: {span: 6, offset: 3},  // 3+6+6+6+3
        4: {span: 5, offset: 2},  // 2+5+5+5+5+2
      },
      wxLoginOption: {
        loginType: 0,
        topTitle: '普通扫码登录',
        tipsTitle: '请使用微信扫一扫进行扫码登录',
        buttonTitle: '扫码登录'
      },
      wxOfficialLoginOption: {
        loginType: 1,
        topTitle: '微信扫码登录',
        tipsTitle: '请使用微信扫一扫进行扫码登录',
        buttonTitle: '微信'
      },
      feishuLoginOption: {
        loginType: 2,
        topTitle: '飞书扫码登录',
        tipsTitle: '请使用飞书扫一扫进行扫码登录',
        buttonTitle: '飞书'
      },
      dingtalkLoginOption: {
        loginType: 3,
        topTitle: '钉钉扫码登录',
        tipsTitle: '请使用钉钉扫一扫进行扫码登录',
        buttonTitle: '钉钉'
      }
    }
  },
  computed: {
    ...mapState('d2admin', {
      loginTypeList: state => state.settings.data['third.login_type'] // 登录类型
    })
  },
  created() {
  },
  mounted() {
  },
  methods: {}

}
</script>

<style scoped>
.dd-button {
  width: 100%;
  background-color: rgba(50, 130, 247, 1);
  border-color: rgba(50, 130, 247, 1);
}

.dd-button:hover {
  right: -4px;
  background-color: rgba(50, 130, 247, 0.8);
}
</style>
